<template>
  <div>
    <swiper :lunboList="lunboList"></swiper>
    <!-- 九宫格 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
        <img src="../../assets/images/menu1.png" alt="">
        <div class="mui-media-body">新闻资讯</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photolist">
        <img src="../../assets/images/menu2.png" alt="">
        <div class="mui-media-body">图片分享</div>
        </router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
        <img src="../../assets/images/menu3.png" alt="">
        <div class="mui-media-body">商品购买</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <img src="../../assets/images/menu4.png" alt="">
        <div class="mui-media-body">留言反馈</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <img src="../../assets/images/menu5.png" alt="">
        <div class="mui-media-body">视频专区</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
        <img src="../../assets/images/menu6.png" alt="">
        <div class="mui-media-body">联系我们</div></a></li>
  </ul> 
      
  </div>
</template>
<script>
  // 导入轮播图组件
  import swiper from '../subcomponents/swiper.vue';

  import Vue from 'vue'
  import { Swipe, SwipeItem } from 'mint-ui';
  Vue.component(Swipe.name, Swipe);
  Vue.component(SwipeItem.name, SwipeItem);


  export default {
    data() {
      return {
        lunboList: []
      }
    },
    created() {
      this.getLunbo();
    },
    methods: {
      getLunbo() {
        this.$http.jsonp('http://www.codece.com/cros/index.php',{
          jsonp:'cb'
        }).then(result=>{
          //console.log(result.body);
          this.lunboList = result.body.message;
        });
      }
    },
    components: {
      'swiper': swiper
    }
  }
</script>
<style lang="less" scoped>

.mui-table-view-cell{
  width: 33.3333%;
  img{
    width: 100%;
  }
}
.mui-grid-view{
  background:#FFF !important;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
  border:0 none;
}
</style>